<template>
    <div class="hl-tab">
        <div class="tab-item" :class="(item.id == tab.select)?'active':''" v-for="item in tab.list"
             @click="changeActive(item)">
            {{item.label}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "hl-tab",
        props: {
            tab: {
                type: Object,
                default: function () {
                    return {
                        list: [],
                        select: 0
                    }
                }
            }
        },
        methods: {
            changeActive(item) {
                this.$emit('changeActive', item)
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../assets/theme";

    .hl-tab {
        background: #fff;
        box-sizing: border-box;
        border-bottom: solid 1PX #e0e0e0;
        height: 88px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .tab-item {
            color: #888888;
            height: 88px;
            flex: 1;
            text-align: center;
            border-bottom: solid 4px transparent;
            line-height: 88px;
            font-size: 28px;
            align-items: center;
            justify-content: center;
            &.active {
                color: @app-color;
                border-bottom: solid 4px @app-color;

            }
        }
    }
</style>